<template>
  <div class="content" flex>
    <div class="left" @click.stop="menuShow = true">{{ menuOptions[activeIndex]||'下拉菜单' }}
      <transition name="el-zoom-in-top">
        <ul v-show="menuShow" class="menu">
          <li v-for="(item,index) in menuOptions" :key="index" :class="index === activeIndex && 'active'||''" @click="activeIndex = index">{{ item }}</li>
        </ul>
      </transition>
    </div>
    <div class="right">
      <!-- <input id="tipinput" v-model="inputValue" class="input" type="text" placeholder="搜索关键字" @focus="menuShow = true"> -->
      <input v-model="inputValue" class="input" type="text" placeholder="搜索受灾区域" @keyup.enter="startSearch">
      <i v-if="!!inputValue" class="el-icon-circle-close icon" style="right: 80px;top: 30px;" @click="inputValue = ''" />
      <img src="@/assets/img_qingqin/module6/search_icon.png" class="el-icon-search icon" @click="startSearch">
      <!-- <a id="resetBtn" href="javascript:;" title="回到初始位置" class="icon"><i class="el-icon-location-outline" /></a> -->

    </div>
    <Modal v-model="dialogVisible" class="custom_modal" :title="tableData.scjgj_qyjbxx_qymc || `企业 ( ${tableList.length} )`" @close="showTableDetail = false,tableData = {}">
      <table v-if="!showTableDetail" class="table_content" style="width:100%;line-height:78px;color:#fff;font-size:24px;">
        <thead class="thead">
          <tr>
            <td class="text_over">序号</td>
            <td colspan="3">企业名称</td>
            <td colspan="3" style="width:400px">经营范围</td>
            <td colspan="2">税收关系</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableList" :key="index" :class="tableTrIndex === index?'active':''" @click="handleTableTrClick(index,item) ">
            <td>0{{ index }}</td>
            <td colspan="3">
              <div class="text_over">{{ item.scjgj_qyjbxx_qymc || item.qymc || '--' }}</div>
            </td>
            <td colspan="3">
              <div class="text_over">{{ item.scjgj_qyjbxx_jyfw || item.dz || '--' }}</div>
            </td>
            <td colspan="2" class="text_over">{{ item.scjgj_qyjbxx_fr || item.fr || '--' }}</td>
          </tr>
          <tr v-if="!tableList.length">
            <td colspan="9" style="text-align:center">暂无数据，请重新输入搜索内容</td>
          </tr>
        </tbody>
      </table>
      <div v-else class="table_detail">
        <!-- <div>返回</div> -->
        <div class="detail_content">
          <div flex>
            <div class="flex_1">注册资本：<span>{{ tableData.scjgj_qyjbxx_zczbs || '--' }}{{ tableData.scjgj_qyjbxx_zczjdw }}万</span> </div>
            <div class="flex_1">实缴资本：<span>--</span> </div>
          </div>
          <div flex>
            <div class="flex_1">注册日期：<span>{{ (tableData.scjgj_qyjbxx_zcrq||[]).slice(0,11) }}</span> </div>
            <div class="flex_1">企业状态：<span>{{ tableData.scjgj_qyjbxx_qyzt }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">统一社会信用代码：<span>{{ tableData.scjgj_qyjbxx_tyshxydm }}</span> </div>
            <div class="flex_1">工商注册号：<span>{{ tableData.scjgj_qyjbxx_nbxh }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">纳税人识别号：<span>--</span> </div>
            <div class="flex_1">组织机构代码：<span>--</span> </div>
          </div>
          <div flex>
            <div class="flex_1">企业类型：<span>{{ tableData.scjgj_qyjbxx_qylx }}</span> </div>
            <div class="flex_1">行业：<span>{{ tableData.scjgj_qyjbxx_hy }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">核准日期：<span>--</span> </div>
            <div class="flex_1">登记机关：<span>{{ tableData.scjgj_qyjbxx_djjg }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">营业期限：<span>{{ (tableData.scjgj_qyjbxx_jyqxqzrq||[]).slice(0,11) }} 至 {{ (tableData.scjgj_qyjbxx_jyqxzzrq||[]).slice(0,11) }}</span> </div>
            <div class="flex_1">缴纳人资质：<span>--</span> </div>
          </div>
          <div flex>
            <div class="flex_1">人员规模：<span>--</span> </div>
            <div class="flex_1">归属区域：<span>{{ tableData.scjgj_qyjbxx_gsqy }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">行业 ：<span>{{ tableData.scjgj_qyjbxx_hy }}</span> </div>
            <div class="flex_1">法人：<span>{{ tableData.scjgj_qyjbxx_fr }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">注册地址：<span>{{ tableData.scjgj_qyjbxx_dz }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">经营范围：<span>{{ tableData.scjgj_qyjbxx_jyfw }}</span> </div>
          </div>
          <div flex="main:center">
            <div class="back_btn" @click="tableData = {},showTableDetail=false"> 返回 </div>
          </div>
        </div>

        <!-- <div flex="main:center">
        <div class="pagination_content" flex>
          <div class="pagination_item"><i class="el-icon-arrow-left" /></div>
          <div v-for="i in 5" :key="i" :class="curPage === i?'active':''" class="pagination_item" @click="curPage = i">{{ i }}</div>
          <div class="pagination_item"><i class="el-icon-arrow-right" /></div>
        </div>
      </div> -->
        <!-- <el-pagination
        class="screen_pagination"
        layout="prev, pager, next"
        :total="50"
      /> -->
      </div></Modal>
    <!-- <div class="custem" /> -->
    <!-- <transition name="el-zoom-in-top">

    </transition> -->
    <!-- <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>这是一段信息</span>
    </el-dialog> -->
  </div>
</template>

<script>
// import { optionBar } from './module6_option.js'
// import Charts from '@jiaminghi/charts'
import Modal from '@/components/Modal/index'
// import { searchByName, getById } from '@/api/home'
export default {
  components: { Modal },
  data() {
    return {
      menuShow: false,
      activeIndex: 0,
      menuOptions: ['综合', '制造', '服务', '科技', '批发', '汽车销售', '建筑'],
      inputValue: '',
      dialogVisible: false,
      curPage: 1,
      tableList: [],
      tableTrIndex: -1,
      showTableDetail: false,
      tableData: {}
    }
  },
  created() {
    this.$nextTick(() => {
      // new Charts(this.$refs.bar).setOption(optionBar)
      // new Charts(this.$refs.line).setOption(optionLine)
      this.$eventBus.$emit('moduleComplete', this)
    })
    // this.$eventBus.$emit('moduleComplete', this)
  },
  mounted() {
    document.addEventListener('click', e => {
      this.menuShow = false
    })
  },
  methods: {
    handleClick(value) {
      this.inputValue = value
      document.querySelector('#tipinput').focus()
    },
    handleFocus(e) {
      this.menuShow = true
    },
    startSearch(isByOut) {
      this.dialogVisible = true
      if (isByOut === true) return
      this.tableList = []
      searchByName({ name: this.inputValue }).then(res => {
        this.tableList = res.data || []
      })
    },
    handleTableTrClick(index, item) {
      this.tableTrIndex = index
      this.showTableDetail = true
      if (item.id) {
        getById({ id: item.id }).then(res => {
          this.tableData = res.data
        })
      } else {
        this.tableData = { ...item }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  background: none!important;
  margin:35px 40px;
  font-size: 28px;
  color: #BFDAFF;

  .left{
    background: url("~@/assets/img_qingqin/module6/search_bg.png") !important;
    background-repeat:no-repeat !important ;
    background-size:100% 100% ;
    height: 110px;
    line-height: 110px;
    width: 361px;
    // text-align: right;
    padding-left: 160px;
    padding-top: 15px;
    padding-right: 50px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;

    .icon{
      position: absolute;
      right: 30px;
      top: 56px;
    }
    // .icon{
    //   position: absolute;
    //   right: 10px;
    //   top: 0;
    //   font-size: 50px;
    //   color: #39FFF5;
    // }
    .menu{
      list-style: none;
      background: url("~@/assets/img_qingqin/module6/menu_bg.png");
      background-size: 100% 100%;
      background-repeat:no-repeat;
      position: absolute;
      left: 100px;
      width: 250px;
      padding:0;
      text-align: center;
      line-height: 64px;
      margin-top:0;
      padding-bottom: 12px;
      li{
        margin-top: 15px;
        &.active,&:hover{
          background: url("~@/assets/img_qingqin/module6/item_active.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  }
  .right{
    background: url("~@/assets/img_qingqin/module6/search_right_bg.png") !important;
    background-repeat:no-repeat !important ;
    background-size:100% 100% ;
    height: 105px;
    line-height: 90px;
    width: 514px;
    margin-top: 25px;
    margin-left: 50px;
    padding-left: 30px;
    position: relative;
    .input{
      background: none;
      color: #BFDAFF;
      border: none;
      line-height: 75px;
      outline-width: 0;
      font-size: 28px;
    }
    .icon{
      position: absolute;
      right: 20px;
      top: 25px;
      color: #39FFF5;
      opacity: .6;
      &:hover{
        cursor: pointer;
        opacity: 1;
      }
    }

  .custem{
    position: absolute;

  }

}
</style>
